<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>热点</title>
		<!--引入 Vue  和  vant -->
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<script src="js/vue.min.js?v=21"></script>
		<script src="js/jquery.min.js?v=21"></script>
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<!-- vantUi框架 -->
		<!-- 样式 -->
		<link rel="stylesheet" type="text/css" href="vant-ui@2.11/index.css" />
		<!-- 逻辑方法 -->
		<script src="vant-ui@2.11/vant.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<!-- 样式 -->
	<style>
	
	.title-view{
		background-color: #00BCD4;
		color: #fff;
		text-align: center;
		padding: 10px 0;
	}
	</style>
	<body>
		<div id="root">
			<div class="title-view">热点</div>
			<van-tabbar v-model="active" @change="onChange">
				<van-tabbar-item>
					<span>首页</span>
					<template #icon="props">
						<img src="img/home_n.png" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item icon="search">行程</van-tabbar-item>
				<van-tabbar-item icon="setting-o">热点</van-tabbar-item>
				<van-tabbar-item icon="setting-o">我的</van-tabbar-item>
			</van-tabbar>
		</div>
		<script>
			new Vue({
				el: "#root",
				data() {
					return {
						active:2,//底部导航栏下标
					}
				},
				methods: {
					// 底部导航栏切换
					onChange(index) {
						console.log('当前点击了第' + index + '个')
						//跳转要销毁当前页面
						// window.location.replace('tripPage.html')
						if(index == 0){
							// 跳转到首页
							window.location.replace('mainPage.html')
						}else if(index == 1){
							// 跳转到行程页
							window.location.replace('tripPage.html')
						}else if(index == 2){
							// 跳转到热点页
							window.location.replace('hotPage.html')
						}else if(index == 3){
							// 跳转到我的
							window.location.replace('minePage.html')
						}
					},
				},
				mounted() {

				}
			})
		</script>
	</body>
</html>
